<template>
  <view>
    <map
      id="myMap"
      :latitude="latitude"
      :longitude="longitude"
      :markers="markers"
      :show-location="true"
      style="width: 100%; height: 600px;"
    />
    <view class="button-group">
      <button type="primary" @click="moveToLocation">移动到当前位置</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      latitude: 23.099994,
      longitude: 113.32452,
      markers: [

      ],
      covers: [
        {
          latitude: 23.099994,
          longitude: 113.34452,
          iconPath: '/static/image/location.png'
        },
        {
          latitude: 23.099994,
          longitude: 113.30452,
          iconPath: '/static/image/location.png'
        }
      ],
      mapCtx: null
    };
  },
  onReady() {
    this.mapCtx = uni.createMapContext('myMap');
	this.moveToLocation();
  },
  methods: {
    getCenterLocation() {
      this.mapCtx.getCenterLocation({
        success: (res) => {
          console.log('中心经度:', res.longitude);
          console.log('中心纬度:', res.latitude);
        }
      });
    },

    moveToLocation() {
      this.mapCtx.moveToLocation();
    },
    translateMarker() {
      this.mapCtx.translateMarker({
        markerId: 1,
        autoRotate: true,
        duration: 1000,
        destination: {
          latitude: 23.10229,
          longitude: 113.3345211
        },
        animationEnd() {
          console.log('动画结束');
        }
      });
    },
    includePoints() {
      this.mapCtx.includePoints({
        padding: [10],
        points: [
          {
            latitude: 23.10229,
            longitude: 113.3345211
          },
          {
            latitude: 23.00229,
            longitude: 113.3345211
          }
        ]
      });
    }
  }
};
</script>

<style scoped>
button {
  margin: 10px;
}
.button-group {
  display: flex;
  flex-direction: column;
  align-items: center;
}
</style>
